

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">+1</button>
    <p>用户名: {{ user.name }} ({{ user.age }}岁)</p>
    <custom-button></custom-button>
    <CustomInput></CustomInput>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { CustomButton } from "@ljh/custom-button"
import CustomInput from "@ljh/custom-input"

// 定义用户类型接口
interface User {
  name: string
  age: number
}

export default defineComponent({
  components: {  // 必须显式注册引入的组件
    CustomButton,
    CustomInput
  },
  setup() {
    // 基础类型
    const title = ref<string>('Vue + TypeScript 应用')
    const count = ref<number>(0)

    // 对象类型（使用接口约束）
    const user = reactive<User>({
      name: '张三',
      age: 25
    })

    // 方法（指定参数和返回值类型）
    const increment = (): void => {
      count.value++
    }

    return {
      title,
      count,
      user,
      increment
    }
  }
})
</script>

<style>
.app {
  text-align: center;
  margin: 2rem;
  font-family: sans-serif;
}
button {
  padding: 0.5rem 1rem;
  background: #3eaf7c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
</style>